<template>
  <BaseTable
    ref="baseTableRef"
    :apiUrl="getVmGroupList"
    :columns="columns"
    :isShowAddBtn="false"
    :height="height"
    placeholder="请输入主机组名称"
  >
    <template #enable="{ record }">
      <ga-switch
        size="mini"
        v-model="record.enable"
        @change="handleEnabledChange(record)"
      />
    </template>
    <!-- <template #operatBtns>
      <ga-button type="primary">同步</ga-button>
    </template> -->
    <template #action="{ record }">
      <ga-link @click="$refs.addOrEditRef.open(record)">编辑</ga-link>
      <!-- <ga-link status="danger">删除</ga-link> -->
    </template>
  </BaseTable>
  <addOrEdit ref="addOrEditRef" @fetchData="$refs.baseTableRef.fetchData()" />
</template>

<script setup>
import { ref } from "vue";
import { columns } from "./columns";
import { getVmGroupList } from "@/api/vmGroup.ts";
import addOrEdit from "./addOrEdit.vue";
const props = defineProps({
  height: {
    type: String,
    default: "calc(100vh - 236px)",
  },
});
// 处理方法
const handleEnabledChange = async ({ id, enable }) => {
  try {
    const { code } = await updatePluginStatus(id, { enable });
    if (code === 20000) Message.success("操作成功");
  } catch (error) {
    baseTableRef.value.fetchData();
  }
};
</script>

<style lang="scss" scoped></style>
